<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        /* 带有  title 属性的  p 标签 */
        p[title] {
            color: red;
        }
        
        /* title 属性 是 hello  的  p 标签 */
        p[title="hello"]{
            color: orange;
        }


        /* class 属性 里边 含有  o  这个字符   的   p  标签 */
        p[class*="o"]{
            color: pink;
        }

        /* class 属性  是以  t  字符开头 的  开头的  p标签   */
        p[class^="t"]{
            color: red;
        }


        /* class 属性  以 t  字符结尾 的  p标签 */
        p[class$="t"]{
            color: blue;
        }
        p[tittle]{
            color: blue;
        }
    </style>
</head>

<body>

    <!-- 每个p标签 带有的 属性 不同 ,那我们 可以根据属性 选中不同的元素 -->
    <p title="hello">今天天气真好啊</p>
    <p title="nice">今天天气真好啊</p>
    <p class="word">今天天气真好啊</p>
    <p class="text">今天天气真好啊</p>
    <p class="texa">今天天气真好啊</p>
    <p class="ao">今天天气真好啊</p>
    <p data-name="today">今天天气真好啊</p>
</body>

</html>